import cx from 'classnames';
import * as React from 'react';
import Radio from '../../../../Radio';
import { prefix } from '../../../../config';
import { getPrefixCls } from '../../../../utils';
import type { EditableCell } from './type';

export interface EditableRadioProps extends EditableCell {
  value: any;
}
const cellPrefixCls = getPrefixCls(prefix.editableTable, 'cell');

export default function EditableRadio(props: EditableRadioProps) {
  const {
    align,
    columnId,
    value,
    curModalParams,
    onChange,
    onBlur,
    onClick,
    onDoubleClick,
    onMouseEnter,
    onMouseLeave,
    ...restProps
  } = props;
  return (
    <Radio.Group
      {...restProps}
      className={cx(align, `${cellPrefixCls}__component`)}
      value={value}
      onChange={(e) => {
        onChange(e.target.value);
        onBlur(e.target.value);
      }}
      onMouseEnter={
        onMouseEnter &&
        onMouseLeave.bind(this, { id: columnId, params: curModalParams })
      }
      onMouseLeave={
        onMouseLeave &&
        onClick.bind(this, { id: columnId, params: curModalParams })
      }
    />
  );
}
